<template>
	<view class="user-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="avatar-section">
				<image class="avatar" :src="user.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
				<view class="user-info">
					<text class="username">{{ user.username || '未登录' }}</text>
					<text class="role">{{ getRoleName(user.role) }}</text>
				</view>
			</view>
			
			<!-- 用户数据概览 -->
			<view class="user-stats">
				<view class="stat-item">
					<text class="stat-value">{{ lastLoginFormatted }}</text>
					<text class="stat-label">上次登录</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ user.role === 'admin' ? '管理员' : '普通用户' }}</text>
					<text class="stat-label">账户类型</text>
				</view>
			</view>
		</view>
		
		<!-- 菜单列表 -->
		<view class="menu-list">
			<view class="menu-group">
				<view class="menu-item" @tap="goToProfile">
					<text class="iconfont icon-user"></text>
					<text class="menu-label">个人资料</text>
					<text class="menu-arrow">›</text>
				</view>
				<view class="menu-item" @tap="goToSecurity">
					<text class="iconfont icon-lock"></text>
					<text class="menu-label">账号安全</text>
					<text class="menu-arrow">›</text>
				</view>
			</view>
			
			<view class="menu-group">
				<view class="menu-item" @tap="goToSettings">
					<text class="iconfont icon-settings"></text>
					<text class="menu-label">系统设置</text>
					<text class="menu-arrow">›</text>
				</view>
				<view class="menu-item" @tap="goToHelp">
					<text class="iconfont icon-help"></text>
					<text class="menu-label">帮助中心</text>
					<text class="menu-arrow">›</text>
				</view>
				<view class="menu-item" @tap="goToAbout">
					<text class="iconfont icon-info"></text>
					<text class="menu-label">关于我们</text>
					<text class="menu-arrow">›</text>
				</view>
			</view>
			
			<!-- 管理员专属菜单 -->
			<view class="menu-group" v-if="isAdmin">
				<view class="menu-item" @tap="goToUserManagement">
					<text class="iconfont icon-team"></text>
					<text class="menu-label">用户管理</text>
					<text class="menu-arrow">›</text>
				</view>
				<view class="menu-item" @tap="goToSystemLogs">
					<text class="iconfont icon-file"></text>
					<text class="menu-label">系统日志</text>
					<text class="menu-arrow">›</text>
				</view>
			</view>
			
			<!-- 退出登录按钮 -->
			<view class="logout-btn" @tap="handleLogout">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
import auth from '../common/auth.js';
import api from '../common/api.js';

export default {
	data() {
		return {
			user: {
				username: '',
				role: 'guest',
				avatar: '',
				last_login: null
			},
			isAdmin: false
		}
	},
	computed: {
		// 格式化上次登录时间
		lastLoginFormatted() {
			if (!this.user.last_login) {
				return '首次登录';
			}
			
			const date = new Date(this.user.last_login);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			
			return `${year}-${month}-${day} ${hours}:${minutes}`;
		}
	},
	onShow() {
		// 检查登录状态并加载用户信息
		this.checkLoginStatus();
	},
	methods: {
		// 检查登录状态
		checkLoginStatus() {
			if (auth.isLoggedIn()) {
				// 获取本地存储的用户信息
				const storedUser = auth.getCurrentUser();
				if (storedUser) {
					this.user = storedUser;
					this.isAdmin = auth.isAdmin();
				} else {
					// 如果本地没有用户信息，从服务器获取
					this.fetchUserInfo();
				}
			} else {
				// 未登录，跳转到登录页
				auth.redirectToLogin();
			}
		},
		
		// 从服务器获取用户信息
		fetchUserInfo() {
			uni.showLoading({
				title: '加载中...'
			});
			
			api.getCurrentUser()
				.then(res => {
					uni.hideLoading();
					if (res.statusCode === 200 && res.data.success) {
						// 更新用户信息
						this.user = res.data.data.user;
						this.isAdmin = this.user.role === 'admin';
						
						// 更新本地存储
						uni.setStorageSync('user', JSON.stringify(this.user));
					} else {
						// 获取失败，可能是token无效
						auth.redirectToLogin('获取用户信息失败，请重新登录');
					}
				})
				.catch(err => {
					uni.hideLoading();
					console.error('获取用户信息失败:', err);
					auth.redirectToLogin('获取用户信息失败，请重新登录');
				});
		},
		
		// 处理退出登录
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						auth.logout();
					}
				}
			});
		},
		
		// 获取角色名称
		getRoleName(role) {
			switch (role) {
				case 'admin':
					return '系统管理员';
				case 'user':
					return '普通用户';
				default:
					return '访客';
			}
		},
		
		// 页面导航方法
		goToProfile() {
			uni.navigateTo({
				url: '/pages/my/profile'
			});
		},
		goToSecurity() {
			uni.navigateTo({
				url: '/pages/my/security'
			});
		},
		goToSettings() {
			uni.navigateTo({
				url: '/pages/my/settings'
			});
		},
		goToHelp() {
			uni.navigateTo({
				url: '/pages/my/help'
			});
		},
		goToAbout() {
			uni.navigateTo({
				url: '/pages/my/about'
			});
		},
		goToUserManagement() {
			uni.navigateTo({
				url: '/pages/admin/user-management'
			});
		},
		goToSystemLogs() {
			uni.navigateTo({
				url: '/pages/admin/system-logs'
			});
		}
	}
}
</script>

<style lang="scss">
.user-container {
	padding: 20rpx;
	background-color: #f8f8f8;
	min-height: 100vh;
	
	.user-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		
		.avatar-section {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			
			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 75rpx;
				margin-right: 30rpx;
				background-color: #f0f0f0;
			}
			
			.user-info {
				.username {
					font-size: 40rpx;
					font-weight: bold;
					color: #333;
					display: block;
					margin-bottom: 10rpx;
				}
				
				.role {
					font-size: 28rpx;
					color: #666;
					background-color: #f5f5f5;
					padding: 4rpx 20rpx;
					border-radius: 30rpx;
				}
			}
		}
		
		.user-stats {
			display: flex;
			border-top: 1px solid #f0f0f0;
			padding-top: 30rpx;
			
			.stat-item {
				flex: 1;
				text-align: center;
				
				.stat-value {
					display: block;
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 10rpx;
				}
				
				.stat-label {
					font-size: 26rpx;
					color: #999;
				}
			}
		}
	}
	
	.menu-list {
		.menu-group {
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			overflow: hidden;
			
			.menu-item {
				display: flex;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1px solid #f5f5f5;
				
				&:last-child {
					border-bottom: none;
				}
				
				.iconfont {
					font-size: 40rpx;
					color: #007AFF;
					margin-right: 20rpx;
				}
				
				.menu-label {
					flex: 1;
					font-size: 30rpx;
					color: #333;
				}
				
				.menu-arrow {
					font-size: 40rpx;
					color: #ccc;
				}
			}
		}
		
		.logout-btn {
			margin-top: 60rpx;
			text-align: center;
			background-color: #fff;
			border: 1px solid #ff5a5f;
			color: #ff5a5f;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 32rpx;
		}
	}
}
</style> 